import React from 'react'
import PropTypes from 'prop-types'
import { routerRedux } from 'dva/router'
import { connect } from 'dva'
import { Row, Col, Button, Popconfirm } from 'antd'
import { Page } from 'components'
import queryString from 'query-string'
import List from './List'
import Modal from './Modal'


const Node = ({
  location, dispatch, node, loading,
}) => {
  location.query = queryString.parse(location.search)
  const { query, pathname } = location
  const {
    list, currentItem, modalVisible, nodes,
  } = node

  const handleClick = () => {
    dispatch({
      type: 'node/showModal',
      payload: {
        currentItem: {},
      },
    })
  }

  const modalProps = {
    item: currentItem,
    nodes,
    visible: modalVisible,
    maskClosable: false,
    confirmLoading: loading.effects['node/save'],
    title: currentItem.id ? '编辑节点' : '新增节点',
    wrapClassName: 'vertical-center-modal',
    onOk (data) {
      dispatch({
        type: 'node/save',
        payload: data,
      })
    },
    onCancel () {
      dispatch({
        type: 'node/hideModal',
      })
    },
  }

  const listProps = {
    dataSource: list,
    loading: loading.effects['node/query'],
    pagination: false,
    location,
    onChange () {
      dispatch(routerRedux.push(pathname))
    },
    onDeleteItem (param) {
      dispatch({
        type: 'node/delete',
        payload: param,
      })
    },
    onEditItem (record) {
      dispatch({
        type: 'node/showModal',
        payload: {
          currentItem: record,
        },
      })
    },
  }

  return (
    <Page inner>
      <Button type="primary" onClick={handleClick}>新增节点</Button>
      <br /><br />
      <List {...listProps} />
      {modalVisible && <Modal {...modalProps} />}
    </Page>
  )
}

Node.propTypes = {
  node: PropTypes.object,
  location: PropTypes.object,
  dispatch: PropTypes.func,
  loading: PropTypes.object,
}

export default connect(({ node, loading }) => ({ node, loading }))(Node)
